<template>
  <el-container class="h-100">
    <el-main class="mr-2 bg-white">
      <!-- <el-button type="primary" class="float-right mr-3 mb-2" size="small" @click="dialogVisible=true">添加小组</el-button> -->
      <el-button type="primary" class="float-right mr-3 mb-2" size="small" @click="$emit('back')">返回</el-button>
      <el-table :data="model.rows">
        <el-table-column label="序号" min-width="50" align="center">
          <template slot-scope="scope">
            {{ scope.$index + 1 + model.pageSize * (model.pageIndex - 1) }}
          </template>
        </el-table-column>
        <el-table-column prop="name" label="组名" align="center"></el-table-column>
        <el-table-column prop="head" label="负责人" align="center"></el-table-column>
        <el-table-column prop="mobile" label="电话" align="center"></el-table-column>
        <el-table-column prop="userCount" label="人数" align="center"></el-table-column>
        <el-table-column prop="jobContent" label="工作内容" width="250" show-overflow-tooltip align="center"></el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-tooltip content="查看详情" placement="top">
              <i
                class="el-icon-document"
                style="font-size: 1.2rem;"
                @click="restInfo(scope.row)"
              ></i>
            </el-tooltip>
            <!-- <el-tooltip content="删除" placement="top">
              <i
                class="el-icon-delete ml-3"
                style="font-size: 1.2rem;"
                @click="deleteItem(scope.row)"
              ></i>
            </el-tooltip> -->
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        v-show="model.rows.length > 0"
        class="text-right py-3 pr-5 bg-white"
        @size-change="handleSizeChange"
        @current-change="val => this.model.pageLoad(val)"
        :current-page.sync="model.pageIndex"
        :page-sizes="[20, 50, 100, 200]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="model.count"
        :pager-count="7"
      >
      </el-pagination>
    </el-main>
    <el-aside width="400px" class="bg-white">
      <survey-info :info="originInfo" :is-edit="false"></survey-info>
    </el-aside>
    <el-dialog
      :title="Boolean(ruleForm.id)? '修改小组信息' : '添加小组'"
      :close-on-click-modal="false"
      :visible.sync="dialogVisible"
      @closed="clearRuleForm"
      width="700px"
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="名称" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="负责人" prop="head">
          <el-input v-model="ruleForm.head"></el-input>
        </el-form-item>
        <el-form-item label="电话" prop="mobile">
          <el-input v-model="ruleForm.mobile"></el-input>
        </el-form-item>
        <el-form-item label="工作内容" prop="jobContent">
          <el-input type="textarea" v-model="ruleForm.jobContent"></el-input>
        </el-form-item>
        <el-form-item label="成员" prop="jobContent">
          <el-tag
            class="mr-2"
            :key="index"
            v-for="(tag, index) in ruleForm.surveyUserInfoList"
            :disable-transitions="false"
            @close="handleClose(tag, index)">
            {{tag.name}}-{{tag.mobile}}
          </el-tag>
          <el-row :gutter="10" v-if="inputVisible">
            <el-col :span="8">
              <div class="grid-content bg-purple">
                <el-input
                  class="input-new-tag"
                  v-model="userInfo.name"
                  ref="saveTagInput"
                  size="small"
                  @keyup.enter.native="handleInputConfirm"
                  placeholder="输入组员姓名"
                >
                </el-input>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content bg-purple">
                <el-input
                  class="input-new-tag"
                  v-model="userInfo.mobile"
                  ref="saveTagInput"
                  size="small"
                  @keyup.enter.native="handleInputConfirm"
                  placeholder="输入组员电话"
                >
                </el-input>
              </div>
            </el-col>
            <el-col :span="3">
              <div class="grid-content bg-purple">
                <el-button type="primary" size="small" @click="handleInputConfirm">添加</el-button>
              </div>
            </el-col>
            <el-col :span="3">
              <div class="grid-content bg-purple">
                <el-button size="small" @click="cannelAdd">取消</el-button>
              </div>
            </el-col>
          </el-row>
          <!-- <el-button v-else class="button-new-tag" size="small" @click="showInput">添加成员</el-button> -->
        </el-form-item>
        <!-- <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')"
            >保存</el-button
          >
        </el-form-item> -->
      </el-form>
    </el-dialog>
  </el-container>
</template>
<script>
import PagedList from "../../../libs/PagedList";
import SurveyInfo from './SurveyInfo'

export default {
  name: 'countrydetail',
  title: '区县三调办详情',
  components: {SurveyInfo},
  data() {
    return {
      model: new PagedList("survey/office/getSurveyTeamWithUserInfoList", 20),
      originInfo: {
        id: '',
        name: '',
        head: '',
        mobile: '',
        introduce: ''
      },
      ruleForm: {
        name: '',
        head: '',
        mobile: '',
        introduce: '',
        surveyUserInfoList: []
      },
      userInfo: {
        name: '',
        mobile: ''
      },
      dialogVisible: false,
      inputVisible: false,
      rules: {
        name: [
          { required: true, message: '请输入名称名称', trigger: 'blur' }
        ],
        head: [
          { required: true, message: '请输入负责人', trigger: 'blur' }
        ],
        mobile: [
          { required: true, message: '请输入电话', trigger: 'blur' }
        ]
      }
    }
  },
  props: {
    row: {
      type: Object
    }
  },
  mounted() {
    this.newSearch();
    this.getInfo()
  },
  methods: {
    newSearch() {
      this.model.search({id: this.row.id});
    },
    handleSizeChange (pageSize ) {
      this.model.pageSize = pageSize
      this.newSearch();
    },
    getInfo () {
      this.originInfo = this.row
    },
    restInfo (row) {
      this.ruleForm = Object.assign({}, row)
      this.$nextTick(() => {
        this.dialogVisible = true
      })
    },
    addItem () {
      this.dialogVisible = ture
    },
    // 表单添加成员
    showInput () {
      this.inputVisible = true
    },
    // 取消添加成员
    cannelAdd () {
      this.inputVisible = !this.inputVisible
      this.userInfo = {
        name: '',
        mobile: ''
      }
    },
    // 添加
    handleInputConfirm () {
      if (this.userInfo.name.length === 0) {
        this.$message({
          showClose: true,
          message: '请输入组员的姓名电话',
          type: 'warning'
        })
        return
      }
      if (!(/^1[34578]\d{9}$/.test(this.userInfo.mobile))) {
        this.$message({
          showClose: true,
          message: '电话号码不正确',
          type: 'warning'
        })
        return
      }
      this.ruleForm.surveyUserInfoList.push({
        mobile: this.userInfo.mobile, 
        name: this.userInfo.name
      })
      this.userInfo = {
        name: '',
        mobile: ''
      }
      this.inputVisible = !this.inputVisible
    },
    // 删除tag
    handleClose (tag, index) {
      this.ruleForm.surveyUserInfoList.splice(index, 1); 
    },
    submitForm () {
      // survey/office/insertOrUpdateSurveyTeamInfo
      this.$post('survey/office/insertOrUpdateSurveyTeamInfo', this.ruleForm, {convert: false}).then(res => {
        this.$message({
          message: this.ruleForm.id ? '修改成功' : '新建成功',
          type: 'success'
        })
        this.dialogVisible = false
        this.newSearch()
      })
    },
    deleteItem (row) {
      this.$confirm(`确认删除 ${row.name} ?`, "确认删除", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.$get('survey/office/deleteSurveyTeamInfo', {id: row.id}).then(res => {
          this.$message({
            message: '删除成功',
            type: 'success'
          })
          this.newSearch()
        })
      }).catch(() => {
        this.$message({
          type: "info",
          message: "已取消删除"
        });
      })
      
    },
    clearRuleForm () {
      this.ruleForm = {
        name: '',
        head: '',
        mobile: '',
        introduce: ''
      }
      this.$refs.ruleForm.resetFields();
    }
  }
}
</script>
<style lang='scss'>
</style>